<template>
    <userDialog
        v-model="visible"
        :dialogTitle="`${unitsDialogType}用户`"
        width="880px"
        @open="init"
        @handleCloseDialog="handleCloseDialog(false)"
    >
        <template v-slot:userDiagContent>
            <dialogFormContent title="基本信息">
                <template v-slot:form_info="{ isShowInfoFold }">
                    <div v-show="isShowInfoFold">
                        <el-form
                            :rules="addRoleFromRulesBase"
                            ref="queryFormRefBase"
                            :model="baseFrom"
                            class="user_form_content"
                        >
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="单位名称："
                                        prop="name"
                                    >
                                        <el-input
                                            v-model="baseFrom.name"
                                            placeholder="请输入单位名称"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="单位地址："
                                        prop="address"
                                    >
                                        <el-input
                                            v-model="baseFrom.address"
                                            placeholder="请输入单位地址"
                                        />
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item
                                        label="单位简称："
                                        prop="describe"
                                    >
                                        <el-input
                                            v-model="baseFrom.short_name"
                                            placeholder="请输入单位简称"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="固定电话："
                                        prop="telephone"
                                    >
                                        <el-input
                                            v-model="baseFrom.telephone"
                                            placeholder="请输入固定电话"
                                        />
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item
                                        label="单位介绍："
                                        prop="describe"
                                    >
                                        <el-input
                                            v-model="baseFrom.describe"
                                            autosize
                                            type="textarea"
                                            placeholder="请输入单位介绍"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </template>
            </dialogFormContent>
            <dialogFormContent title="负责人信息">
                <template v-slot:form_info="{ isShowInfoFold }">
                    <div v-show="isShowInfoFold">
                        <el-form
                            :rules="addRoleFromRulesDirector"
                            ref="queryFormRefDirector"
                            :model="directorFrom"
                            class="user_form_content"
                        >
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="真实姓名："
                                        prop="contact"
                                    >
                                        <el-input
                                            v-model="directorFrom.contact"
                                            placeholder="请输入真实姓名"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="手机号：" prop="phone">
                                        <el-input
                                            v-model="directorFrom.phone"
                                            placeholder="请输入手机号"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="QQ：" prop="qq">
                                        <el-input
                                            v-model="directorFrom.qq"
                                            placeholder="请输入QQ"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="E-mail：" prop="email">
                                        <el-input
                                            v-model="directorFrom.email"
                                            placeholder="请输入邮箱"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </template>
            </dialogFormContent>
            <div class="btnStyle mt-20px">
                <el-button type="primary" @click="upData()"> 提交 </el-button>
                <el-button type="info" @click="handleCloseDialog()">
                    重置
                </el-button>
            </div>
        </template>
    </userDialog>
</template>

<script setup lang="ts">
import UnitsAPI from "@/api/system/units";

import {
    addRoleFromRulesBase,
    addRoleFromRulesDirector,
} from "@/views/system/unitsManager/index";
const emit = defineEmits(["reFresh"]);
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const props = defineProps({
    unitsDialogType: {
        required: true,
        default: () => "添加" as any,
    },
    unitsId: {
        required: true,
        default: () => "",
    },
});
const queryFormRefBase = ref();
const queryFormRefDirector = ref();

const baseFrom: any = ref({
    name: "",
    address: "",
    short_name: "",
    telephone: "",
    describe: "",
});
const directorFrom: any = ref({
    contact: "",
    phone: "",
    qq: "",
    email: "",
});

// 初始化表单
async function init() {
    if (props.unitsDialogType === "编辑" && props.unitsId) {
        await getuniteDetail();
    }
}

// 获取单位信息
async function getuniteDetail() {
    let id = props.unitsId;
    await UnitsAPI.getUnitsInfo(id)
        .then((data: any) => {
            putUnitsDetail(data.detail);
        })
        .catch((err: any) => {
            console.log(err);
        });
}

// 回写详情信息
async function putUnitsDetail(data: any) {
    Object.keys(baseFrom.value).forEach((item: any) => {
        baseFrom.value[item] = data[item];
    });
    Object.keys(directorFrom.value).forEach((item: any) => {
        directorFrom.value[item] = data[item];
    });
}

// 提交
async function upData() {
    //表单校验
    const formBaseValid = await queryFormRefBase.value.validate(
        (isValid: boolean) => {
            return isValid;
        }
    );
    const formDirectorValid = await queryFormRefDirector.value.validate(
        (isValid: boolean) => {
            return isValid;
        }
    );
    if (!formBaseValid || !formDirectorValid) {
        return;
    }

    // 表单参数
    let formParams: any = {
        ...baseFrom.value,
        ...directorFrom.value,
    };

    let api = UnitsAPI.addUnits;

    if (props.unitsDialogType === "编辑" && props.unitsId) {
        api = UnitsAPI.editUnitsInfo;
        formParams.id = props.unitsId;
    }
    await api(formParams)
        .then((data: any) => {
            visible.value = false;
            emit("reFresh");
            ElMessage.success(`${props.unitsDialogType}成功`);
        })
        .catch((err: any) => {
            console.log(err);
        });
}

function handleCloseDialog(visibleValue = true) {
    if (!visibleValue) {
        visible.value = visibleValue;
    }
    queryFormRefBase.value.resetFields();
    queryFormRefBase.value.clearValidate();
    queryFormRefDirector.value.resetFields();
    queryFormRefDirector.value.clearValidate();
}

function btnClick() {}
</script>

<style lang="scss" scoped>
.btnStyle {
    padding: 0 255px;
    @include flexLayout;
    justify-content: space-between;
    .el-button {
        font-size: 16px;
        padding: 20px 40px;
    }
}
.user_form_content {
    :deep(.el-form-item) {
        display: flex;
        label {
            width: 94px;
        }
        .el-input,
        .el-select {
            height: 32px;
            width: 372px;
            .el-select__wrapper {
                height: 32px;
                line-height: 32px;
            }
        }
    }
}
</style>
